import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts/core'

export function getOption(): EChartsOption {
  return  {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
   grid: {
     top: '20%',
     left: '2%',
     right: '2%',
     bottom: '5%',
     containLabel: true
   },
    xAxis: [{
      type: 'category',
      axisLabel: {
        color: '#fff',
        interval:0
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#0a3e98'
        }
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#195384',
          type: "dotted",
        }
      },
      data: ['博雅社区','曹家村','大草坝村','大东关社区','杜家漕村']
    }],
    yAxis: [
      {
        type: 'value',
        min: 0,
        position: 'left',
        nameTextStyle: {
          color: "#fff",
          fontSize: 11,
        },
        axisLine: {
          lineStyle: {
            color: '#0a3e98'
          }
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#0a3e98',
            type: "dotted",
          }
        },
        axisLabel: {
          formatter: '{value}',
          color: "#fff",
        },
      }
    ],
    series: [{
      name: '户数',
      type: 'bar',
      barWidth: 15, //柱子宽度
      barGap: 0.3, //柱子之间间距
      itemStyle: {
        borderRadius:[10,10,0,0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.5, [{
          offset: 0,
          color: "#d4fffa"
        },
          {
            offset: 1,
            color: "#02bf98"
          }
        ]),
      },
      label:{
        show: true,
        position: "top",
        formatter: "{c}",
        color:'#fff'
      },
      data: ['11','2','2','1','3','2','4',],
      animationDuration: function (idx:any) {
        return idx * 1500 + 1000;
      }
    }
    ]
  };
}
